<ion-header>
  <ion-navbar>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>今日热文</ion-title>
  </ion-navbar>
</ion-header>


<ion-content class="getting-started">
    <ion-refresher (ionRefresh)="doRefresh($event)">
      <ion-refresher-content refreshingSpinner="circles" refreshingText="正在加载中..."></ion-refresher-content>
    </ion-refresher>

  <!--<h3>Welcome to your first Ionic app!</h3>

  <p>
    This starter project is our way of helping you get a functional app running in record time.
  </p>
  <p>
    Follow along on the tutorial section of the Ionic docs!
  </p>
  <p>
    <button primary menuToggle>Toggle Menu</button>
  </p>-->


  <ion-card style="width: 100%;background: red" class="noMargin">


    <!--<ion-card-header>
    TOP Stories
  </ion-card-header>-->

    <ion-slides [options]="mySlideOptions" pager style="height: 200px">
      <ion-slide *ngFor="let top_story of top_stories" (click)="storyShow($event, top_story)">
        <img src="{{top_story.images}}" alt="">
                <div class="slide-title">{{top_story.title}}</div>
      </ion-slide>
    </ion-slides>

  </ion-card>
  <ion-list>
    <ion-item-group *ngFor="let stories of all_stories">
      <ion-item-divider>{{stories.date}}</ion-item-divider>
      <ion-item *ngFor="let story of stories.stories" (click)="storyShow($event, story)">
      <ion-thumbnail item-left>
        <img src="{{story.images}}" alt="">
      </ion-thumbnail>
      {{story.title}}
      </ion-item>
    </ion-item-group>
  </ion-list>
  <!--<ion-infinite-scroll (ionInfinite)="loadMore($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>-->
  <button block (click)='loadMore()'>查看更多</button>
</ion-content>
